<template>
	<el-dialog :title="title" :visible.sync="dialogVisible" width="60%" :before-close="close">
		<el-form ref="form" :disabled="title=='查看'" :rules="rules" :model="param" label-width="140px">
			<el-form-item label="文章标题:" prop="title">
				<el-input maxlength="30" v-model="param.title" placeholder="请输入文章标题"></el-input>
			</el-form-item>
			<el-form-item label="文章封面:">
				<Imglist @updataImg='imgResult' :dialogVisible='dialogVisible' :limit='1' :value="cover" :disable="title!='查看'"></Imglist>
			</el-form-item>
			<el-form-item label="文章类型:" prop="article_type">
				<el-radio v-model="param.article_type" :label="0">图文</el-radio>
				<el-radio v-model="param.article_type" :label="1">视频</el-radio>
			</el-form-item>
			<el-form-item label="课程:" prop="course_id">
				<el-select clearable v-model="param.course_id" placeholder="请选择">
					<el-option v-for="(v,i) in classList" :key="i" :value="v.id" :label="v.course_name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="文章内容:" v-if="param.article_type==0">
				<editor  :heightMultiple="1.1" height="500" :value="param.content" @getTxt="getEditor"></editor>
			</el-form-item>
			<el-form-item label="视频:" v-if="param.article_type==1">
				<template>
					<uploadVideo :videoUrl="param.media_address" @updataVideo="videoResult"></uploadVideo>
	<!-- 				<el-input class="mt20" type="textarea" :rows="2" v-model="param.media_address" placeholder="请输入视频地址">
					</el-input> -->
				</template>
			</el-form-item>
<!-- 			<el-form-item label="文件大小（B）:" v-if="param.article_type==1" prop="media_size">
				<div class="w200">
					<el-input placeholder="请输入文件大小" v-model="param.media_size"></el-input>
				</div>
			</el-form-item> -->
<!-- 			<el-form-item label="时长（单位秒）:" v-if="param.article_type==1" prop="duration">
				<el-input-number v-model="param.duration" :min="0" label="时长"></el-input-number>
			</el-form-item> -->
			<el-form-item label="初始阅读人数:" prop="init_browse_num">
				<el-input-number :disabled="title!='新增'" v-model="param.init_browse_num" @blur="BlurText($event)"  :min="0" label="初始阅读人数">
				</el-input-number>
			</el-form-item>
			<el-form-item label="初始点赞人数:" prop="init_like_num">
				<el-input-number :disabled="title!='新增'" v-model="param.init_like_num" @blur="BlurText($event)" :min="0" label="初始点赞人数">
				</el-input-number>
			</el-form-item>
			<el-form-item label="初始分享人数:" prop="init_share_num">
				<el-input-number :disabled="title!='新增'" v-model="param.init_share_num"  @blur="BlurText($event)" :min="0" label="初始分享人数">
				</el-input-number>
			</el-form-item>
			<el-form-item label="浏览人数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.browse_num" :min="0" label="时长"></el-input-number>
			</el-form-item>
			<el-form-item label="点赞人数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.like_num" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="分享人数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.share_num" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="评论人数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.comment_num" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="浏览总数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.browse_sum" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="评论总数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.comment_sum" :min="0"></el-input-number>
			</el-form-item>
			<el-form-item label="分享总数:" v-if="title!='新增'">
				<el-input-number disabled v-model="param.share_sum" :min="0"></el-input-number>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
      <el-button type="primary" v-if="title=='查看'?false:true" @click="submit">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import Imglist from '@/views/modules/oss/oss-uploadImg'
import editor from '@/components/editor.vue'
	import uploadVideo from '@/views/modules/oss/oss-uploadvideo.vue'
	import merchantApi from '@/api/merchantService.js'
	export default {
	  components: {
	    Imglist,
	    editor,
	    uploadVideo
	},
	  data () {
	    return {
	      rules: {
	        title: [{
	          required: true,
	          message: '请输入文章标题',
	          trigger: 'change'
	}],
	        article_type: [{
	          required: true,
	          message: '请选择文章类型',
	          trigger: 'change'
	}],
	        course_id: [{
	          required: true,
	          message: '请选择课程',
	          trigger: 'change'
	}],
	        media_size: [{
	          required: true,
	          message: '请输入文件大小',
	          trigger: 'change'
	}],
	        init_browse_num: [{
	          required: true,
	          message: '请输入初始阅读人数',
	          trigger: 'change'
	}],
	        init_like_num: [{
	          required: true,
	          message: '请输入初始点赞人数',
	          trigger: 'change'
	}],
	        init_share_num: [{
	          required: true,
	          message: '请输入初始分享人数',
	          trigger: 'change'
	}]
	},
	      dialogVisible: false,
	      param: {
	        article_type: 0,
	        init_browse_num: 0,
	        init_like_num: 0,
	        init_share_num: 0
	},
	      classList: [],
	      cover: [],
	      id: null // 详情数据 id
	}
	},
	  props: {
	    title: {
	      type: String,
	      default: '详情'
	}
	},
	  watch: {
	    dialogVisible (n, o) {
	      if (n) {
	        this.getClassSelect()
	        if (this.title != '新增') {
	          this.getDetails()
	}
	}
	}
	},
	  methods: {
    BlurText (e) {
      let boolean = new RegExp('^[0-9]*$').test(e.target.value)
      if (!boolean) {
        this.$message.warning('请输入正整数')
        e.target.value = 0
      }
    },
	    handleClose () {
	      this.handleClose = false
	},
			// 上传图片时的回调
	    imgResult (e) {
	      this.param.cover = e[0]
	},
			// 上传视频时的回调
	    videoResult (e, s) {
      console.log(e, s)
	      this.param.media_address = e
			// this.param.duration = parseInt(s.duration * 100) / 100;
			// this.param.media_size = parseInt(s.size * 100) / 100;
	      this.$forceUpdate()
	},
			// 富文本的回调
	    getEditor (e) {
	      this.param.content = e
	},
			// 获取数据详情
	    getDetails () {
	      this.cover = []
	      merchantApi.showArticle(this.id).then(res => {
	        if (res.data && res.data.code == 200) {
	          this.param = res.data.data
	          this.cover = [this.param.cover]
	        }
	})
	},
			// 获取课程分类列表（下拉）
	    getClassSelect () {
	      merchantApi.courseClassApi().then(res => {
	        if (res.data && res.data.code == 200) {
	          this.classList = res.data.list
	        }
	})
	},
			// 关闭弹窗
	    close () {
	      this.param = {
	        article_type: 0,
	        init_browse_num: 0,
	        init_like_num: 0,
	        init_share_num: 0,
	        content: ''
	}
			// this.$refs.form.clearValidate();
      this.$refs.form.resetFields()
	      this.dialogVisible = false
	    },
			// 提交
	    submit () {
	      this.$refs.form.validate((valid) => {
	        if (valid) {
	          if (!this.param.cover) {
	            this.$message.warning('请上传封面图片')
	            return
	} else if (!this.param.content && this.param.article_type == 0) {
	  this.$message.warning('请输入文章内容')
	  return
	} else if (!this.param.media_address && this.param.article_type == 1) {
	  this.$message.warning('请上传视频')
	  return
	}
	          if (this.title == '新增') {
	            merchantApi.saveArticle(this.param).then(res => {
	              if (res.data && res.data.code === 200) {
	                this.$message.success('提交成功')
                this.$parent.getDataList()
	                this.close()
	}
	})
	} else {
	            merchantApi.updateArticle(this.param).then(res => {
	              if (res.data && res.data.code === 200) {
	                this.$message.success('提交成功')
                this.$parent.getDataList()
	                this.close()
	}
	})
	}
	}
	})
	}
	}
	}
</script>

<style lang="scss" scoped>
	video {
		width: 300px;
		display: block;
	}

	.w200 {
		width: 200px;
	}

	.mt20 {
		margin-top: 20px;
	}
</style>
